<template>
  <div class="offLine">
    <el-card class="box-card">
      <el-scrollbar wrapClass="scrollbar-wrapper">
        <el-form :inline="true" class="demo-form-inline" size="mini" v-model="queryForm">
          <el-row>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-plus" @click="showFormEvent()">新增任务</el-button>
            </el-form-item>
          </el-row>
          <el-form-item label="任务类型">
            <el-select v-model="queryForm.jobType" clearable placeholder="请选择">
              <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="启用状态">
            <el-select v-model="queryForm.jobState" clearable placeholder="请选择">
              <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker v-model="queryForm.createdate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="searchEvent">搜索</el-button>
          </el-form-item>
        </el-form>
        <znxd-list :column="column" :page="page" :tableData="tableData" @handlePageChange="handlePageChange(page)" :pagination="true"></znxd-list>
      </el-scrollbar>
    </el-card>
    <!-- 表单弹出框 -->
    <off-line-dialog :databaseFormVisible="databaseFormVisible" :initData="rowData" @close="fromClose"></off-line-dialog>
    <!-- 表单弹出框 -->
  </div>
</template>

<script >
import {
  jobOffLineTime,
  del,
  updataStatus,
  triggerTask
} from "@/api/task/offline.js";
import { getDiction, formatTime } from "@/utils/config.js";
import offLineDialog from "./offLineDialog";
export default {
  components: {
    offLineDialog
  },
  data() {
    return {
      // 类型字典
      typeOptions: [
        {
          label: "单表数据同步",
          value: 0
        },
        {
          label: "多表数据同步",
          value: 1
        }
      ],
      // 状态字典
      statusOptions: [
        {
          label: "启用",
          value: 1
        },
        {
          label: "禁用",
          value: 0
        }
        // {
        //   label: "删除",
        //   value: 0
        // }
      ],
      page: {
        pageNo: 1, // 当前位于哪页
        pageSize: 10, // 1页显示多少条
        total: 0
      },
      // 搜索条件
      queryForm: {},
      tableData: [],
      // 列表配置
      column: [
        {
          align: "left",
          name: "jobName",
          label: "任务名称",
          showOverflowTooltip: true
        },
        {
          align: "left",
          name: "jobDescribe",
          label: "任务描述",
          showOverflowTooltip: true
        },
        {
          align: "center",
          name: "jobType",
          label: "任务类型",
          handleGetName: code => {
            return getDiction(this.typeOptions, code);
          }
        },
        {
          align: "center",
          name: "jobState",
          label: "启用状态",
          width: 80,
          handleGetName: code => {
            return getDiction(this.statusOptions, code);
          }
        },
        {
          align: "center",
          name: "latestExecutionTime",
          label: "最近执行时间"
        },
        {
          align: "center",
          name: "jobExecuteStatus",
          label: "执行状态"
        },
        {
          align: "left",
          name: "jobCron",
          label: "执行周期"
        },
        {
          align: "center",
          name: "nextExecuteTime",
          label: "下次执行时间"
        },
        {
          align: "center",
          name: "createdate",
          label: "创建时间"
        },
        {
          align: "center",
          label: "操作",
          width: 300,
          buttons: [
            {
              label: "编辑",
              type: "primary",
              plain: false,
              size: "mini",
              handelClick: row => {
                this.showFormEvent(row);
              }
            },
            {
              label: "删除",
              type: "warning",
              plain: false,
              size: "mini",
              handelClick: row => {
                this.deleteEvent(row);
              }
            },
            {
              label: "配置",
              type: "danger",
              plain: true,
              size: "mini",
              handelClick: row => {
                this.setEvent(row);
              }
            }
          ],
          dropdownButtons: [
            {
              label: "停用",
              handleGetName: row => {
                return row.jobState === 1 ? "停用" : "启用";
              },
              handelClick: row => {
                this.changeStatusEvent(
                  row,
                  "jobState",
                  row.jobState === 1 ? 0 : 1
                );
              }
            },
            {
              label: "执行",
              handelClick: row => {
                this.executeEvent(row);
              }
            },
            {
              label: "数据同步监控",
              handelClick: row => {
                if (row.jobInfoId === null || row.jobInfoId === 0) {
                  return this.$message({
                    message: "任务未配置，暂时不能查看",
                    type: "error"
                  });
                }
                this.$router.push({
                  path: "monitoringOffLine",
                  query: { jobInfoId: row.jobInfoId, type: 1 }
                });
              }
            }
          ]
        }
      ],
      // 表单管理
      databaseFormVisible: false,
      rowData: {}
    };
  },
  methods: {
    // 列表操作
    searchEvent() {
      this.page.pageNo = 1;
      this.getSourceData();
    },
    getSourceData() {
      let obj = {
        ...this.page,
        ...this.queryForm
      };
      if (obj.createdate) {
        obj.createdate = formatTime("yyyy-MM-dd", obj.createdate);
      }
      jobOffLineTime(obj).then(res => {
        let data = res.data;
        if (data.code === 200) {
          this.tableData = data.content;
          this.page.total = data.total;
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    handlePageChange(page) {
      this.page = page;
      this.getSourceData();
    },
    // form表单弹框操作
    fromClose() {
      this.databaseFormVisible = false;
      this.getSourceData();
    },
    showFormEvent(row) {
      this.databaseFormVisible = true;
      if (row) {
        this.rowData = row;
      } else {
        this.rowData = {};
      }
    },
    // 二级操作
    deleteEvent(row) {
      if (row.jobState === 1) {
        this.$message({
          type: "info",
          message: "任务启用，不能删除"
        });
        return;
      }
      this.$confirm("确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let obj = {
            id: row.id
          };
          del(obj)
            .then(res => {
              let data = res.data;
              if (data.code === 200) {
                this.$message({
                  type: "success",
                  message: data.msg || "操作成功"
                });
                this.getSourceData();
              } else {
                this.$message({
                  type: "error",
                  message: data.msg
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "操作失败"
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    setEvent(row) {
      if (row.jobType === 0) {
        this.$router.push({ path: "setting", query: { id: row.id } });
      } else if (row.jobType === 1) {
        this.$router.push({ path: "settingMultilist", query: { id: row.id } });
      }
    },
    executeEvent(row) {
      this.$confirm("确定执行任务吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let obj = {
          id: row.id
        };
        triggerTask(obj)
          .then(res => {
            let data = res.data;
            if (data.code === 200) {
              this.$message({
                message: data.msg || "操作成功",
                type: "success"
              });
            } else {
              this.$message({
                message: data.msg,
                type: "error"
              });
            }
            this.getSourceData();
          })
          .catch(() => {
            // this.$message.error(error);
            this.$message({
              message: "操作失败",
              type: "error"
            });
          });
      });
    },
    changeStatusEvent(row, name, value) {
      let obj = {
        id: row.id
      };
      obj[name] = value;
      updataStatus(obj)
        .then(res => {
          let data = res.data;
          if (data.code === 200) {
            this.$message({
              message: data.msg || "操作成功",
              type: "success"
            });
            this.getSourceData();
          } else {
            this.$message({
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(() => {
          // this.$message.error(error);
          this.$message({
            message: "操作失败",
            type: "error"
          });
        });
    }
  },
  mounted() {
    this.getSourceData();
  }
};
</script>
<style lang="scss" scoped>
@import "../../../assets/style/style.scss";
@import "../../../assets/style/variable.scss";
</style>
